<template>
    <li>
        <input type="checkbox" :checked="completed" @change="toggleCompletion">
        <span :style="{ textDecoration: completed ? 'line-through' : 'none' }">{{ title }}</span>
        <button @click="removeTodo">删除</button>
    </li>
</template>

<script>
export default {
    props: ['title', 'completed'],
    methods: {
        toggleCompletion() {
            this.$emit('update:completed', !this.completed);
        },
        removeTodo() {
            this.$emit('remove-todo');
        }
    }
};
</script>